<script setup>
import Echarts from '../../board/comprehensive/echarts.vue'
import { GetLocationDeviceAPI } from '@/api/equipmentOperation'
const { proxy } = getCurrentInstance()

/**
 * 字典查询
 */
const { sys_tool_staus } = proxy.useDict('sys_tool_staus')
// 查询条件 枚举
const selectList = ref([
  { label: '年份选择', type: '年份选择', model: 'ac' },

  {
    label: '能耗',
    type: '下拉单选',
    opt: [
      {
        label: '电',
        value: 1,
      },
      {
        label: '气',
        value: 2,
      },
    ],
  },
])

/**
 * 树结构
 */
const dataTree = ref([])

/**
 * 表单实例
 */
const ruleFormRef = ref(null)
/**
 * 表单
 */
const ruleForm = ref({})

/**
 * 树结构枚举
 */
const defaultProps = {
  children: 'children',
  label: 'name',
  value: 'id',
}

/**
 * 表单实例
 */
const submitFormRef = ref(null)

/**
 * 各种状态
 */
const state = reactive({
  loading: false,
  total: 0,
  btnLoading: false,
  isShow: false,
  title: '新增',
  row: [],
  ids: [],
  treeShow: false, //树结构弹窗
})

/**
 * 类别下拉树结构
 */
const getTreeList = async () => {
  try {
    const { data: res } = await GetLocationDeviceAPI()
    console.log(res, 'res')
    dataTree.value = res
  } catch (err) {
    console.log(err)
  }
}
getTreeList()

/*
 * 图表
 */
const option = {
  legend: { bottom: '5%', itemWidth: 9.5, itemHeight: 8.5 },
  tooltip: {},
  dataset: {
    source: [
      // ['product', '2015', '2016', '2017'],
      ['1月', 43.3, 85.8, 93.7],
      ['2月', 83.1, 73.4, 55.1],
      ['3月', 86.4, 65.2, 82.5],
      ['4月', 72.4, 53.9, 39.1],
      ['5月', 43.3, 85.8, 93.7],
      ['6月', 83.1, 73.4, 55.1],
      ['7月', 86.4, 65.2, 82.5],
      ['8月', 72.4, 53.9, 39.1],
      ['9月', 43.3, 85.8, 93.7],
      ['10月', 83.1, 73.4, 55.1],
      ['11月', 86.4, 65.2, 82.5],
      ['12月', 72.4, 53.9, 39.1],
    ],
  },
  grid: {
    left: '11%',
    bottom: '20%',
  },
  xAxis: { type: 'category' },
  yAxis: {},
  // Declare several bar series, each will be mapped
  // to a column of dataset.source by default.
  series: [
    {
      type: 'bar',
      name: 2022,
      itemStyle: {
        color: '#027db4',
        borderRadius: [10, 10, 10, 10],
      },
    },
    {
      type: 'bar',
      name: 2023,
      itemStyle: {
        color: '#f59a23',
        borderRadius: [10, 10, 10, 10],
      },
    },
    {
      name: 2024,
      type: 'bar',
      itemStyle: {
        color: '#40ac98',
        borderRadius: [10, 10, 10, 10],
      },
    },
  ],
}
</script>

<template>
  <div class="app-container">
    <el-row :gutter="30">
      <el-col :span="5"
        ><div class="grid-content ep-bg-purple" />
        <el-card class="card-tree">
          <template #header>
            <el-input v-model="input3" style="width: 100%" placeholder="搜索">
              <template #suffix>
                <el-icon class="Search" size="40"><Search /></el-icon>
              </template>
            </el-input>
          </template>

          <el-tree
            :data="dataTree"
            :props="defaultProps"
            @node-click="handleNodeClick"
          >
          </el-tree>
        </el-card>
      </el-col>

      <el-col :span="19">
        <div class="Echarts">
          <p-select-form
            :selectForm="selectList"
            @selectSubmit="selectSubmit"
          />
          <div class="box">
            <Echarts :option="option" height="100%" :loading="true" />
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<style scoped lang="scss">
.app-container {
  background-color: #f4f4f4;
}
.card-tree {
  height: 50rem;
  overflow: auto;
}
.show {
  background-color: #169bd5 !important;
  color: #fff;
}
.Echarts {
  background-color: #fff;
  padding: 20px;
  height: 800px;
  .box {
    height: 730px;
  }
}
.card {
  height: 50rem;
  // overflow: auto;
}
.card-header {
  display: flex;
  justify-content: space-between;
}
.tabs {
  display: flex;
  .tabs-list {
    padding: 10px;
    background-color: #e3e3e3;
    margin-right: 10px;
    cursor: pointer;
  }
}
::v-deep .el-input__suffix-inner {
  display: flex !important;
  align-items: center !important;
}
</style>
